<template>
  <div class="rotary" v-if="show">
    <div class="content">
      <Icon type="ios-close-circle-outline" class="close-icon" @click="closeMet" />
      <div class="card-sty">
        <img src="../images/pop_bg.png" class="decoration-head" alt="">
        <div class="head-title">
          <img src="../images/pop_left.png" class="title-img" alt="">
          <span>{{ $t(matchedExplain.title) }}</span>
          <img src="../images/pop_right.png" class="title-img" alt="">
        </div>
        <div :class="explainType === 'SUCCESS' ? 'tip-text' : 'other-text'">
          {{ $t(matchedExplain.sub, { progress: this.winGoods }) }}
        </div>
        <div class="desc-text" v-if="explainType === 'SUCCESS'">{{ $t('activity.activity_prize_sub_tip') }}</div>
        <div class="card-handle" v-if="explainType == 'SUCCESS' || explainType == 'NOT_ENOUGH'">
          <div class="more-btn" @click="moreMet">
            <Icon v-if="explainType === 'NOT_ENOUGH'" type="ios-link" class="link-icon" />
            {{ textMap[explainType] || '' }}
          </div>
        </div>
        <div class="other-handle" v-if="defaultTrue()">
          <div class="discord-btn" @click="joinDiscord">
            <img src="@/assets/images/user/discord.png" class="img" alt="">
            <span class="text">{{ $t('christmas.joinNow') }}</span>
          </div>
        </div>
        <div class="other-handle" v-if="explainType === 'joinActivity'">
          <div class="back-btn" @click="backBtn()">{{ $t('pay.ok_txt1') }}</div>
        </div>
        <!-- 拼团-加入 -->
        <div class="other-handle" v-if="isGroupTrue()">
          <div class="discord-btn" @click="discordMet()">
            <img src="@/assets/images/user/discord.png" class="img" alt="">
            <span class="text">{{ $t('christmas.joinNow') }}</span>
          </div>
        </div>
        <!-- 拼团-重新开团 -->
        <div class="other-handle" v-if="explainType == 'GROUP_NUM_LIMIT' || explainType == 'GROUP_END'">
          <div class="again-group" @click="newMet()">{{ $t('goods.group_play_text52') }}</div>
        </div>
        <!-- 拼团-查看更多拼团商品or加入 -->
        <div class="other-handle" v-if="explainType == 'GROUP_NUM_LIMIT' || explainType == 'GROUP_END'">
          <div class="look-more-btn" @click="discordMet()">
            <img src="@/assets/images/pay/img18.png" class="icon-img" alt="">
            {{ getExplainText() }}
          </div>
        </div>
        <!--  -->
        <div class="other-handle" v-if="this.explainType == 'EACH_ORDER_LIMIT'">
          <div class="again-group" @click="backEdit()">{{ $t('goods.group_play_text79') }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { jumpDiscord, copyInviteLink } from "@/common/common";
export default {
  data() {
    return {
      show: false,
      // SUCCESS 成功 NOT_ENOUGH 剩余次数不足 COMPLETED 已全部完成 PAUSED 已暂停 ENDED 已结束
      explainType: 'SUCCESS',
      winGoods: '',//抽中奖品名称
      explainI18n: [
        {
          title: 'activity.activity_prize_tit',
          sub: 'activity.activity_prize_tip'
        },
        {
          title: 'user.tip_title',
          sub: 'activity.activity_un_num_tip'
        },
        {
          title: 'user.tip_title',
          sub: 'activity.activity_get_num_tip'
        },
        {
          title: 'activity.activity_pause_tit',
          sub: 'activity.activity_pause_tip'
        },
        {
          title: 'activity.activity_end_tit',
          sub: 'activity.activity_end_tip'
        },
        {
          title: 'user.tip_title',
          sub: 'activity.un_join_tip'
        },
        {
          title: 'user.tip_title',
          sub: 'goods.group_play_text49'
        },
        {
          title: 'user.tip_title',
          sub: 'goods.group_play_text50'
        },
        {
          title: 'user.tip_title',
          sub: 'goods.group_play_text51'
        },
        {
          title: 'user.tip_title',
          sub: 'christmas.explainSub2'
        },
        {
          title: 'user.tip_title',
          sub: 'activity.activity_end_tip'
        },
        {
          title: 'user.tip_title',
          sub: 'goods.group_play_text42'
        },
        {
          title: 'user.tip_title',
          sub: 'goods.group_play_text41'
        },
        {
          title: 'user.tip_title',
          sub: 'goods.group_play_text43'
        },
        {
          title: 'user.tip_title',
          sub: 'goods.group_play_text80'
        }
      ]
    }
  },
  computed: {
    matchedExplain() {
      const typeMap = {
        SUCCESS: 0,
        NOT_ENOUGH: 1,
        COMPLETED: 2,
        PAUSED: 3,
        ENDED: 4,
        joinActivity: 5,
        INVITED_USER_TYPE: 6,// 被邀请用户类型限制
        GROUP_NUM_LIMIT: 7,// 拼团人满
        GROUP_END: 8,// 拼团结束
        ACTIVITY_STOP: 9,//活动暂停
        ACTIVITY_END: 10,//活动结束
        SPU_STOCK_ERROR: 11,//库存不足
        TOTAL_LIMIT_NUM: 12,//总限购
        SPU_UN_SHELF: 13, //商品下架
        EACH_ORDER_LIMIT: 14 // 每次限购
      };
      const index = typeMap[this.explainType];
      return this.explainI18n[index] || {};
    },
    textMap() {
      return {
        SUCCESS: this.$t('activity.more_btn_text'),
        NOT_ENOUGH: this.$t('activity.now_share')
        // 你可以继续添加其他 explainType 对应的文本映射
      };
    }
  },
  methods: {
    open(e) {
      this.explainType = e.type;
      if (e && e.text) {
        this.winGoods = e.text;
      }
      this.show = true;
    },
    closeMet() {
      this.show = false;
    },
    moreMet() {
      this.show = false;
      this.$emit('getCount');
    },
    onCopy(info) {
      // 复制
      let _this = this;
      this.$copyText(info).then(function () {
        _this.$Message.success(_this.$t('public.copySuccess'));
      }, function () {
        _this.$Message.error(_this.$t('public.copyFail'));
      })
    },
    joinDiscord() {
      this.show = false;
      jumpDiscord();
    },
    defaultTrue() {
      return this.explainType != 'SUCCESS'
        && this.explainType != 'NOT_ENOUGH'
        && this.explainType != 'joinActivity'
        && this.explainType != 'INVITED_USER_TYPE'
        && this.explainType != 'GROUP_NUM_LIMIT'
        && this.explainType != 'GROUP_END'
        && this.explainType != 'SPU_STOCK_ERROR'
        && this.explainType != 'ACTIVITY_END'
        && this.explainType != 'TOTAL_LIMIT_NUM'
        && this.explainType != 'SPU_UN_SHELF'
        && this.explainType != 'GROUP_END'
        && this.explainType != 'ACTIVITY_STOP'
        && this.explainType != 'EACH_ORDER_LIMIT';
    },
    isTrue() {
      return this.explainType == 'GROUP_NUM_LIMIT'
        || this.explainType == 'SPU_STOCK_ERROR'
        || this.explainType == 'TOTAL_LIMIT_NUM'
        || this.explainType == 'SPU_UN_SHELF'
        || this.explainType == 'GROUP_END'
        || this.explainType == 'INVITED_USER_TYPE';
    },
    discordMet() {
      if (this.isTrue()) {
        window.open('https://discord.gg/H5fEeBCY3y', '_blank');
        //window.open('https://discord.gg/tyqE6KBvD4', '_blank');
      } else if (this.explainType == 'ACTIVITY_END' || this.explainType == 'ACTIVITY_STOP') {
        window.open('https://discord.gg/H5fEeBCY3y', '_blank');
        //window.open('https://discord.gg/Ezn6PVn6k3', '_blank');
      }

      // 点击“加入Discord查看更多商品”
      if (this.$analytics) {
        this.$analytics.logEvent('pt_1012');
      }
    },
    // 是否满足拼团的加入discord条件
    isGroupTrue() {
      return this.explainType == 'INVITED_USER_TYPE'
        || this.explainType == 'ACTIVITY_STOP'
        || this.explainType == 'ACTIVITY_END'
        || this.explainType == 'SPU_STOCK_ERROR'
        || this.explainType == 'TOTAL_LIMIT_NUM'
        || this.explainType == 'SPU_UN_SHELF';
    },
    newMet() {
      this.show = false;
      this.$emit('againEmit');//重新开团
    },
    backBtn() {
      this.$router.push('/');
    },
    getExplainText() {
      if (this.explainType == 'GROUP_NUM_LIMIT') {
        return this.$t('goods.group_play_text55');
      } else {
        return this.$t('christmas.joinNow');
      }
    },
    backEdit() {
      this.show = false;
      setTimeout(() => {
        history.back();
      })
    }
  }
}
</script>

<style lang="less" scoped>
.rotary {
  width: 100vw;
  height: 100vh;
  background-color: #00000080;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;

  .content {
    .close-icon {
      width: 460px;
      color: #FFFFFF;
      font-size: 32px;
      text-align: right;
      margin-bottom: 30px;
      cursor: pointer;
    }

    .card-sty {
      width: 420px;
      background: #FFFFFF;
      border-radius: 12px 12px 12px 12px;
      padding-bottom: 32px;
      position: relative;

      .decoration-head {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
      }

      .head-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 24px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #1E1714;
        line-height: 28px;
        text-align: center;
        padding: 52px 51px 0px 51px;
        margin-bottom: 24px;

        .title-img {
          width: 24px;
          height: 24px;
        }
      }

      .tip-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 30px;
        color: #1E1714;
        line-height: 35px;
        margin-bottom: 22px;
        margin-left: 24px;
        margin-right: 24px;
        text-align: center;
      }

      .desc-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 18px;
        color: #767B93;
        line-height: 24px;
        margin-bottom: 24px;
        text-align: center;
      }

      .other-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #1E1714;
        line-height: 23px;
        margin-top: 24px;
        margin-left: 24px;
        margin-right: 24px;
        text-align: center;
      }

      .card-handle {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-left: 24px;
        margin-right: 24px;
        margin-top: 24px;

        .more-btn {
          padding: 14px 52px;
          background: #1E1714;
          border-radius: 37px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 20px;
          color: #FFFFFF;
          text-align: center;
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 4px;

          .link-icon {
            color: #FFFFFF;
            font-weight: 600;
          }
        }
      }

      .other-handle {
        display: flex;
        justify-content: center;
        margin-top: 24px;

        .discord-btn {
          min-width: 224px;
          // max-width: 224px;
          padding: 0 12px;
          height: 56px;
          background: #1E1714;
          border-radius: 37px 37px 37px 37px;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          gap: 9px;
          cursor: pointer;

          .img {
            width: 24px;
            height: 24px;
          }

          .text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 20px;
            color: #FFFFFF;
            text-wrap: nowrap;
          }
        }

        .back-btn {
          min-width: 224px;
          background: #1E1714;
          border-radius: 37px 37px 37px 37px;
          text-align: center;
          padding: 14px 72px;
          cursor: pointer;
          font-weight: 600;
          font-size: 20px;
          color: #FFFFFF;
          line-height: 23px;
        }

        .again-group {
          width: 100%;
          height: 52px;
          background: #FF186B;
          border-radius: 44px 44px 44px 44px;
          margin-left: 32px;
          margin-right: 32px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 20px;
          color: #FFFFFF;
          line-height: 23px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .look-more-btn {
          width: 100%;
          height: 52px;
          border: 1px solid #FF186B;
          border-radius: 44px 44px 44px 44px;
          margin-left: 32px;
          margin-right: 32px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 20px;
          color: #FF186B;
          line-height: 23px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          .icon-img {
            width: 28px;
            height: 28px;
            margin-right: 6px;
          }
        }
      }
    }
  }
}
</style>